<script>
// 在工程化项目中，万物皆模块
import zfb from '@/assets/zfb.png'
// 导入侧边栏组件
import AsideCom from '../components/AsideCom.vue'
import { Fold, Expand } from '@element-plus/icons-vue'
export default {
  name: 'HomeView',
  data () {
    return {
      url: zfb,
      collapse: false, // 标记侧边栏是否收起来  false 展开，true 收起来
    }
  },
  mounted () {
    if (!this.$store.state.userInfo.adminname) {
      // 用户没有登录
      this.$router.push('/login')
    }
  },
  methods: {
    logoutFn () {
      // 退出登录
      this.$store.commit('updateUserInfo', {})
      this.$router.push('/login')
    },
    loginClick () {
      this.$router.push('/login')
    }
  },
  computed: {
    // 用来计算我们图标组件该使用哪个
    headerLeft () {
      return this.collapse ? 'Expand' : 'Fold'
    },
    // 该计算属性是用来计算侧边栏的宽度
    asideWidth () {
      return this.collapse ? '60px' : '200px'
    }
  },
  components: {
    AsideCom,
    Fold,
    Expand
  }
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside>
        <!-- logo -->
        <div class="logo-box">
          <el-image :src="url"></el-image>
          <h2 v-show="!collapse" class="title">嗨购后台管理系统</h2>
        </div>

        <AsideCom :collapse="collapse" />
      </el-aside>

      <el-container>
        <el-header>
          <el-icon size="30" @click="collapse = !collapse">
            <component :is="headerLeft"></component>
          </el-icon>

          <span v-if="$store.state.userInfo.adminname">
            欢迎 {{ $store.state.userInfo.adminname }}
            <el-button color="#fff" @click="logoutFn">退出</el-button>
          </span>
          <el-button v-else @click="loginClick"> 请登录 </el-button>

        </el-header>
        <!--  -->
        <el-main>
          <!-- 2023年4月26最新代码 ---
          <h1>
            全局状态中的 count 值：{{ this.$store.state.count }}
          </h1> -->

          <router-view></router-view>

        </el-main>
      </el-container>

    </el-container>
  </div>
</template>
<!-- scoped 让该 style 中的样式只在当前组件中生效 -->
<!-- lang="scss" 配置 css 编译语言，这里的 scss 代表的是 sass -->
<style scoped lang="scss">
.logo-box {
  height: 60px;
  display: flex;
  align-items: center;


  .el-image {
    width: 32px;
    height: 32px;
    margin: 0 10px;
  }

  .title {
    font-size: 17px;
  }

}

.el-aside {
  background-color: #00c853;
  /* 通过 v-bind 将计算属性的值直接设置在宽上 */
  width: v-bind(asideWidth);
  transition: all .2s;
}

.el-header {
  background-color: #02933e;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-main {
  background-color: #80d8ff;
}
</style>

